<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/myprofile' }">用户中心</el-breadcrumb-item>
        <el-breadcrumb-item>添加客户</el-breadcrumb-item>
        </el-breadcrumb>
        <center>
            <div style="width:500px">
                <el-form label-width="80px" class="demo-ruleForm" v-if="create_table" size="medium">
                    <center><p>添加客户</p></center>
                    <el-form-item label='客户名称'>
                        <el-input placeholder='请输入客户名称' v-model="username"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址">
                        <el-select placeholder="请选择省" v-model="province" style="width:100px">
                            <el-option v-for="(item,index) in json_list" :key="index" :label="item.name" :value="index"></el-option>
                        </el-select>
                        <el-select placeholder="请选择市" v-model="city" v-if='this.province' style="width:100px">
                            <el-option v-for="(item,index) in json_list[this.province]['city']" :key="index" :label="item.name" :value="index"></el-option>
                        </el-select>
                        <el-select placeholder="请选择县" v-model="county" v-if='this.city' style="width:100px">
                            <el-option v-for="(item,index) in json_list[this.province]['city'][this.city]['area']" :key="index" :label="item.name" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='联系人'>
                        <el-input placeholder='请输入联系人名称' v-model="contacts"></el-input>
                    </el-form-item>
                    <el-form-item label='联系电话'>
                        <el-input placeholder='请输入联系电话' v-model="phone"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="customer_create">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </center>
    </div>
</template>
<script>
import {get_create_customer_get, get_city_code} from './axios_api/api.js'
export default {
    data(){
        return {
            create_table: true,
            // 用户名
            username: '',
            // 联系人
            contacts: '',
            // 联系电话
            phone: '',
            json_list: [],
            province: '',
            city: '',
            county: '',
        }
    },
    mounted() {
        this.get_city()

    },
    methods: {
        customer_create() {
            // 拼接收件地址
            let address;
            if(this.province && this.city && this.county){
                address = this.json_list[this.province].name + '' + this.json_list[this.province]['city'][this.city].name + '' + this.json_list[this.province]['city'][this.city]['area'][this.county].name + '';
            }else if(this.province && this.city){
                address = this.json_list[this.province].name + '' + this.json_list[this.province]['city'][this.city].name
            }else if(this.province){
                address = this.json_list[this.province].name
            }else{
                address = ''
            }
            get_create_customer_get({'username': this.username,'contacts':this.contacts,'phone': this.phone,'address': address}).then(res => {
                console.log(res);
            })
            
        },
        // 获取城市信息
        get_city(){
            get_city_code().then(res => {
                console.log(res)
                this.json_list = res.json_list
            })
        },
    }
}
</script>